<template>
  <el-container style="height: 100%;">
    <el-aside style="width: 170px">
      <div  style=" background-color: rgb(238, 241, 246); width: 170px">
        <el-menu style="overflow: hidden; min-height: 100%;"
                 :collapse-transition="false"
                 class="el-meun-vertical-demo, collectAside"
        >
<!--          active-text-color="#ffd04b"-->
          <div v-for="item in myCollect" :key="item.id" style="border-bottom: 1px solid #e6e6e6;">
            <div >
              <el-menu-item :index="item.id + ''" class="menu-item" style="display: flex">
                <div @click="toCollect(item.id,item.collectName)" style="width: 100px" >
                  <i class="el-icon-folder"></i>
                  <span slot="title" > {{item.collectName}} </span>
                </div>
                <el-popover
                    placement="right"
                    width="60"
                    trigger="hover"
                    style="text-align: right; flex: 1;"
                >
                  <div style=" text-align: center; flex: 1">
                    <el-button size="medium" type="text" @click="handleCollectEdit(item)"  style="padding: 2px">编辑</el-button>
                    <el-popconfirm title="确认删除吗?" @confirm="handleCollectDelete(item.id)">
                      <template #reference>
                        <el-button size="medium"  type="text" style="padding: 2px">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                  <el-button type="text" style="color: #111" slot="reference">|:</el-button>
                </el-popover>
              </el-menu-item>
            </div>
          </div>
        </el-menu>
      </div>
      <el-dialog title="收藏夹" :visible.sync="dialogFormVisible" width="400px">
        <el-form :model="collectForm" label-width="60px">
          <el-form-item label="名称">
            <el-input v-model="collectForm.collectName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false; collectForm = {}">取 消</el-button>
          <el-button type="primary" @click="saveCollect">确 定</el-button>
        </div>
      </el-dialog>
    </el-aside>
    <el-container >
      <el-main>
        <!--        表示当前页面子路由会在 <router-view/> 里面展示-->
        <div style="margin-top: 12px; display: flex">
          <el-input style="width: 200px" placeholder="请输入标题" suffix-icon="el-icon-search" v-model="name"></el-input>
          <el-button style="margin-left: 5px" type="primary" @click="load">搜索</el-button>
          <el-button style="margin-left: 5px" type="warning" @click="reset">重置</el-button>
          <div style="flex: 1; text-align: right">{{this.collectName}}</div>
        </div>
        <div style="margin: 6px 0">
          <el-popconfirm title="确认批量删除吗?" @confirm="delBatch">
            <template #reference>
              <el-button type="danger" >批量取消收藏<i class="el-icon-remove-outline"></i></el-button>
            </template>
          </el-popconfirm>
        </div>
        <el-table :data="tableData" border stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="名称" ></el-table-column>
          <el-table-column prop="user" label="作者" ></el-table-column>
          <el-table-column  label="文章内容" >
            <template scope="scope">
              <el-button @click="view(scope.row.content)" type="primary">查看内容</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发布时间" >
            <template scope="scope">
              {{ new Date(scope.row.createTime).toLocaleDateString() }}
            </template>
          </el-table-column>
          <el-table-column  label="文章封面" width="100">
            <template slot-scope="scope">
              <img  :src="scope.row.coverUrl" style="width: 55px; height: 35px"/>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template #default = "scope">
              <el-button size="small" type="text" @click="$router.push('/front/articleDetail?id=' + scope.row.id)">查看</el-button>
              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
                <template #reference>
                  <el-button size="small"  type="text" style="padding: 2px">取消收藏</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <div style="padding: 2px 0">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>

        <el-dialog title="文章内容" :visible.sync="dialogContentVisible" width="60%">

          <div>
            <mavon-editor
                class="md"
                :value="content"
                :subfield="false"
                :defaultOpen="'preview'"
                :toolbarsFlag="false"
                :editable="false"
                :scrollStyle="true"
                :ishljs="true"
            />
          </div>

        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "FrontCollect",
  data() {
    return {
      myCollect:[], // 我的收藏夹
      dialogFormVisible: false,
      collectForm:{},
      tableData: [],
      total:0,
      name:"",
      pageSize:4,
      pageNum:1,
      form:{},
      dialogContentVisible: false,
      multipleSelection: [],
      id: 0,
      content:'',
      collectName:''
    }
  },
  created() {
    this.loadMyCollect()
  },
  methods : {
    loadMyCollect() {
      this.request.get("collect/myCollect").then(res => {
        this.myCollect = res.data
        console.log(res)
        this.id = res.data[0].id
        this.collectName = res.data[0].collectName
        this.load()
      })
    },
    toCollect(collectId, collectName) {
      this.id = collectId
      this.collectName = collectName
      this.load()
      // console.log(collectId)
    },
    handleCollectEdit(item) {
      this.collectForm = item
      this.dialogFormVisible = true
    },
    saveCollect() {
      this.request.post("/collect", this.collectForm).then(res =>{
        if(res.data) {
          this.$message.success("保存成功")
        } else {
          this.$message.error("保存失败")
        }
        this.load()
      })
      this.dialogFormVisible = false;
      this.collectForm = {};
    },
    // 删除
    handleCollectDelete(id){
      this.request.delete("/collect/delete/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
        } else {
          this.$message.error("删除失败")
        }
        this.load()
      })
    },
    view(content) {
      this.content = content
      this.dialogContentVisible = true
    },
    // 请求分页查询数据
    load(){
      if (this.id === 0 || !this.id) {
        return
      }
      this.request.get("/collect/articles/" + this.id,{
        params:{
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name
        }
      }).then(res =>{
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

    // 删除
    handleDelete(id){
      this.request.delete("/article/" + id).then(res => {
        if (res.data) {
          this.$message.success("删除成功"
          )
        } else {
          this.$message.error("删除失败")
        }
        this.load()
      })
    },
    //实现批量选择
    handleSelectionChange(val) {
      // console.log(val)
      this.multipleSelection = val
    },
    //批量删除
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id) // 得到每个选择对象的 id
      // console.log(ids)
      this.request.post("/article/del/batch", ids).then(res => {
        if (res.data) {
          this.$message.success("批量删除成功")
        } else {
          this.$message.error("批量删除失败")
        }
        this.load()
      })
    },
    // 改变页大小
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load();
    },
    // 改变当前页
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load();
    },
    // 重新设置搜索框
    reset() {
      this.name = ""
      this.load()
    },
    // 打开新增表单
    handleAdd() {
      this.dialogFormVisible = true
      // this.form = {}
    },

  }
}
</script>

<style scoped>
.collectAside{
  border-left: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
}
.menu-item{
  height: 52px;
  line-height: 52px;
  font-size: 14px;
}

.be-dropdown-item {
  /*height: 40px;*/
  /*padding: 0 20px;*/
  line-height: 24px;
  text-align: center;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  /*white-space: nowrap;*/
  /*transition: background-color .2s ease;*/
  cursor: pointer;
}

.cover-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.cover-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.cover-uploader .el-upload:hover {
  border-color: #409EFF;
}
.cover-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 158px;
  height: 98px;
  line-height: 98px;
  text-align: center;
}
.cover {
  border-radius: 10px;
  width: 158px;
  height: 98px;
  display: block;
}
</style>